<template>
	<div>
		<div class="headercon">
			<el-form class="cardboxList_box" ref="form" :model="form" label-width="100px">
				<el-row :gutter="20" class="mb8">
					<el-col :span="6" style="width: 300px;">
						<div class="grid-content bg-purple">
							<el-form-item label="用户">
									<el-select v-model="form.user_id" clearable filterable placeholder="请选择"
										style="width: 100%;">
										<el-option v-for="item in userList" :key="item.user_id" :label="item.nickname"
											:value="item.user_id">
										</el-option>
									</el-select>
							</el-form-item>
							
						</div>
					</el-col>
					<el-col :span="6" style="width: 400px;">
						<div class="grid-content bg-purple">
							<el-form-item label="商品">
									<el-select v-model="form.shangpin_id" clearable filterable placeholder="请选择"
										style="width: 100%;">
										<el-option v-for="item in shangpinList" :key="item.shangpin_id" :label="item.shangpinming"
											:value="item.shangpin_id">
										</el-option>
									</el-select>
							</el-form-item>
							
						</div>
					</el-col>
					<el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" icon="el-icon-search" @click="restSearch">重置</el-button>
						</div>
					</el-col>
					<!-- <el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" icon="el-icon-search"><a style="color: white;" :href="['http://47.96.107.90/api/export_excel/']">导出</a></el-button>
						</div>
					</el-col> -->
					<!-- <el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" @click="showdialogVisible">新增</el-button>
						</div>
					</el-col> -->
				</el-row>
			</el-form>
			<!-- <el-button type="primary" @click="showdialogVisible">新增</el-button> -->
		</div>
	
		<el-table :data="tableData" style="width: 100%">
			
			<el-table-column prop="img" label="用户头像" align="center">
				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px" :src="scope.row.img"
						:preview-src-list="[scope.row.img]"></el-image>
			
				</template>
			</el-table-column>
			<el-table-column prop="nickname" label="用户名" align="center"></el-table-column>
			<el-table-column prop="fengmian" label="商品封面" align="center">
				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px" :src="scope.row.fengmian"
						:preview-src-list="[scope.row.fengmian]"></el-image>
			
				</template>
			</el-table-column>
			<el-table-column prop="shangpinming" label="商品名" align="center"></el-table-column>
			<el-table-column prop="jifenshu" label="积分" align="center"></el-table-column>
			<el-table-column prop="create_time" label="兑换时间" align="center"></el-table-column>
			<!-- <el-table-column prop="password" label="密码">
			</el-table-column> -->
			

			<el-table-column fixed="right" label="操作" width="160">
				<template slot-scope="scope">
					<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> -->
				     <el-button class="delete" type="text" @click="deleteThis(scope.row)" size="small">删除</el-button>

				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="[30]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
		</el-pagination>
		<el-dialog :title="Texttitle" :visible.sync="dialogVisible">
			<el-form class="cardboxList_box">
				<el-row :gutter="60">
				  
					<el-col :span="12">
						<el-form-item label="账号" label-width="138px">
							<el-input style="width: 150px;" v-model="addform.username" type="text"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="密码" label-width="138px">
							<el-input style="width: 150px;" v-model="addform.password" type="text"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="公司" label-width="138px">
							<el-input style="width: 150px;" v-model="addform.company_name" type="text"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="事业部" label-width="138px">
							<el-input style="width: 150px;" v-model="addform.department" type="text"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邀请码" label-width="138px">
							<el-input style="width: 150px;" v-model="addform.invitation_code" type="text"></el-input>
						</el-form-item>
					</el-col>

				 <!-- <el-col :span="16">
				  		<el-form-item label="日期" label-width="138px">
				  			<el-date-picker style="width: 160px;"
				  			      v-model="addform.account_date"
				  			      type="date"
				  			      placeholder="选择日期时间">
				  			    </el-date-picker>
				  		</el-form-item>
				  </el-col> -->
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm_add" size="small">确定</el-button>
				<el-button @click="logCancel_1" size="small">取消</el-button>
			</div>
		</el-dialog>
		
		
	
	
		
	</div>
</template>

<script>
	import Schart from 'vue-schart';
	import bus from '../common/bus';
	import {

		uploadImg,
		duihuanList,
		duihuanAdd,
		duihuanEdict,
		duihuanDelete,
		userList,
		shangpinList
		
	} from '../../api/index';
	export default {
		name: 'dashboard',
		data() {
			return {
				optionsUser:[
					{
						username:'管理员'
					},
					{
						username:'子管理'
					}
				],
				optionsStatus:[
					{
						text:'启用'
					},
					{
						text:'禁用'
					}
				],
				templateDetailFlagtype:1,
				templateFlagtype:1,
				templateLog:'新增',
				templatedetailLog:'新增',
				templateVisibledetail_add_1:false,
				templateVisibledetail_add:false,
				templateVisible_add:false,
				templateVisible:false,
				showViewer: false, // 显示查看器
				ruleForm: '',
				hideUp: '',
				nextProjectForm: {
					publicWelfareUrl: "",
				},
				Texttitle: "新增",
				page: 1,
				page_1: 1,
				form: {
					page: 1,
					size: 30,
					username:undefined,
				},
				
				addform: {
					create_date: "",
					password: "",
					username: "",
					role:'子管理',
				    company_name:'',
					invitation_code:'',
					status:'启用'
				},
				
				childrow: '',
				childtypeflag: 1, //  1新增 2修改
				currentPage: 1, //初始页
				pagesize: 10, //  每页的数据
				pageTotal: '',

				currentPage_1: 1, //初始页
				pagesize_1: 10, //    每页的数据
				pageTotal_1: '',
				
				currentPage_2: 1, //初始页
				pagesize_2: 10, //    每页的数据
				pageTotal_2: '',
				
				dialogVisible: false,
				tableData: [],
				tableData_1:[],
				tableData_2:[],
				
				formitnanme: '',
				flagtype: 1,
				user_id: '',
				user_id_1:'',
				user_id_2:'',
				//详情
				dialogVisible_1: false,
				detailDataLog: '',
				detailrow: '',

				//添加记录
				addLogVisible: false,
				logInfo: '',
				value2: '',
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
                templateUser_id:'',
				userList:[],
				shangpinList:[]
			}
		},
		components: {
			Schart
		},
		computed: {
			role() {
				return this.name === 'admin' ? '超级管理员' : '普通用户';
			}
		},
		created() {
			// this.form.user_id=window.localStorage.getItem('user_id')
			
			this.getList()
		    this.getUserList()
			this.getshangpinList()
			
		},
		// activated() {
		//     this.handleListener();
		// },
		// deactivated() {
		//     window.removeEventListener('resize', this.renderChart);
		//     bus.$off('collapse', this.handleBus);
		// },
		methods: {
	
			
			// 用户列表
			getUserList() {
				let that = this
				let query={
					page:1,
					size:9999999999
				}
				// if (query.company) {
				// 	query.company = query.company.toString()
				// }
			
				console.log(query)
				userList(query).then(res => {
					console.log("用户列表", res);
					that.userList = res.results;
				});
			},
			getshangpinList(){
				let that = this
				let query={
					page:1,
					size:9999999999
				}
				// if (query.company) {
				// 	query.company = query.company.toString()
				// }
							
				console.log(query)
				shangpinList(query).then(res => {
					console.log("商品列表", res);
					that.shangpinList = res.results;
				});
			},
			//重置
			restSearch(){
				this.form.username=''
				this.getList()
			},
			
			//导出
			exportexelBtn() {
				let query = {}
				exportexel(query).then(res => {
					console.log("导出", res)
				});

			},

			dataSearch() {
				this.formatDate(that.value2)
			},
			//添加记录
			showLogdilog(row, type) {
				this.childtypeflag = type
				this.addLogVisible = true
				if (type == 2) {
					this.childrow = row
					this.addformchild = row
					this.uploadimgurl = row.img
				}

			},
			
			addLogcancel() {
				this.addLogVisible = false
			},


			handleSizeChange: function(size) {
				this.pagesize = size;
				console.log(this.pagesize) //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
				this.page = currentPage
				this.getList()
			},
			handleSizeChange_1: function(size) {
				this.pagesize_1 = size;
				this.form1.size=size
				this.templateList(this.templateUser_id)
			},
			handleCurrentChange_1: function(currentPage) {
				this.currentPage_1 = currentPage;
				console.log(this.currentPage_1) //点击第几页
				this.page_1 = currentPage
				this.form1.page=currentPage
				this.templateList(this.templateUser_id)
			},
			
			handleSizeChange_2: function(size) {
				this.pagesize_2 = size;
				this.form2.size=size
				this.templateDetailClick()
			},
			handleCurrentChange_2: function(currentPage) {
				this.currentPage_2 = currentPage;
				console.log(this.currentPage_2) //点击第几页
				this.page_2 = currentPage
				this.form2.page=currentPage
				this.templateDetailClick()
			},
			showdialogVisible() {
				this.Texttitle = '新增'
				this.addform={
					password: "",
					username: "",
					role:'子管理',
					company_name:'',
					invitation_code:'',
					status:'启用'			
				}
				this.user_id = ''
				this.dialogVisible = true
				this.flagtype = 1
			},


			//s删除
			deleteThis(row) {
				let that = this
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						"duihuan_id": row.duihuan_id,
					}
					duihuanDelete(row.duihuan_id, query).then(res => {
						that.dialogVisible = false
						if(res.code==0){
							that.$message({
								message: '删除成功！',
								type: 'success'
							});
							that.getList()
						}
						
						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//编辑
			handleClick(row) {
				console.log("编辑",row)
				this.Texttitle = '编辑'
				this.flagtype = 2
				this.dialogVisible = true
				this.addform= row
				
				this.user_id = row.backstage_user_id
				// this.secondviewsetclik()
				// this.thirdviewsetclik()
			},

			
			//关闭新增弹窗
			logCancel_1() {
				this.dialogVisible = false
			},
			logCancel_2() {
				this.templateVisible_add = false
			},
			logCancel_3() {
				this.templateVisibledetail_add_1 = false
			},

			//新增出入账
			submitForm_add() {
				console.log("新增记录", this.addform)
				if (this.addform.username == ''||this.addform.username == undefined) {
					this.$message.error('请输入账号');
				}else if(this.addform.password == ''||this.addform.password == undefined){
					this.$message.error('请输入密码');
				} else {
					if (this.flagtype == 1) {
						duihuanAdd(this.addform).then(res => {
							console.log("新增", res)
							this.dialogVisible = false
							if(res.code==0){
								this.$message({
									message: '新增成功！',
									type: 'success'
								});
								this.getList()
							}
							
							// this.tableData = res.list;
							// this.pageTotal = res.pageTotal || 50;
						});
					} else {
						// delete this.addform.username;
						duihuanEdict(this.user_id, this.addform).then(res => {
							console.log("修改", res)
							this.dialogVisible = false
							if(res.code==0){
								this.$message({
									message: '修改成功！',
									type: 'success'
								});
								this.getList()
							}
							
							// this.tableData = res.list;
							// this.pageTotal = res.pageTotal || 50;
						});
					}

				}
			},
			getList() {
				let that = this
				let query;
				query = that.form
				console.log(query)
				
				duihuanList(query).then(res => {
					console.log("列表", res);
					that.tableData = res.results;
					that.pageTotal = res.count
				});
			},
			formatTen(num) {
				return num > 9 ? (num + "") : ("0" + num);
			},
			formatDate(date) {
				console.log("时间", date)
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
			
				return year + "-" + this.formatTen(month) + "-" + this.formatTen(day) //+ " " + this.formatTen(hour) + ":" +
					console.log(333,year + "-" + this.formatTen(month) + "-" + this.formatTen(day))
				// this.formatTen(
				// 	minute) + ":" + this.formatTen(second);
			},
			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				});
			}

		}
	};
</script>


<style scoped>
	
	/deep/ .el-pagination__sizes{
		display: none !important;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.headercon {
		height: 100px;
	}

	.el-upload {
		width: 100px;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		align-items: center;
		height: 100px;
	}

	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	.delete {
		color: red;
	}
	.dialog-footer{
		text-align: right;
	}
</style>
